<div class="table">
    <base href="<?php echo base_url() ?>" />

    <table id="records" class="registeredRecord">
        <thead>
        </thead>
        <tbody>
        </tbody>
    </table>

    
    <!-- delete confirmation dialog box -->
    <div id="delConfDialog" title="Confirm">
        <p>Are you sure?</p>
    </div>
    <!-- message dialog box -->
    <div id="msgDialog"><p></p></div>

</div>

<script type="text/template" id="readTemplate">
        <tr id="${sellout_id}">
                <td align="center">${nomor}</td>
                <td style="text-align:left;">${custom_created_on}</td>
				<td style="text-align:left;">${custom_sellout_id}</td>
                <td style="text-align:left;">${getNikName}</td>
				
                <td align="center" width="110px">
					<a class="" href="<?=base_url().'index.php/sell_out/getDetail/' . '${sellout_id}'?>">Detail</a>		
				</td>
				
        </tr>

</script>

<script type="text/javascript">

function closeBack()
{
    $("#darkBack").fadeOut("slow");
    $("#popUpItem").fadeOut("slow");
}

function closeItem()
{
    $("#darkBack").fadeOut("slow");
    $("#popUpItem").fadeOut("slow");
}

$(document).keypress(function(e){
    if(e.keyCode==27){
        $("#darkBack").fadeOut("slow"); 
        $("#popUpItem").fadeOut("slow");   
    }
});

jQuery.fn.center = function () {
        this.css("position","absolute");
        this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
        this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
        return this;
    }

var readUrl   = 'index.php/sell_out/read';

// $( function() {
    
//     $( '#tabs' ).tabs({
//         fx: { height: 'toggle', opacity: 'toggle' }
//     });
    
//     readUsers();
    
//     $( '#msgDialog' ).dialog({
//         autoOpen: false,
        
//         buttons: {
//             'Ok': function() {
//                 $( this ).dialog( 'close' );
//             }
//         }
//     });    
 
    
// }); //end document ready

$(document).ready(function() {
    
    readUsers();
    
    $( '#msgDialog' ).dialog({
        autoOpen: false,
        buttons: {
            'Ok': function() {
                $( this ).dialog( 'close' );
            }
        }
    });
    
    $( '#delConfDialog' ).dialog({
        autoOpen: false,
        buttons: {
            'No': function() {
                $( this ).dialog( 'close' );
            },
            'Yes': function() {
                //display ajax loader animation here...
                $( '.regisAni' ).fadeIn( 'slow' );
                $( this ).dialog( 'close' );
                $.ajax({
                    url: delHref,
                    success: function( response ) {
                        //hide ajax loader animation here...
                        $( '.regisAni' ).fadeOut( 'slow' );
                        
                        $( '#msgDialog > p' ).html( response );
                        $( '#msgDialog' ).dialog( 'option', 'title', 'Success' ).dialog( 'open' );
                        
                        $( 'a[href=' + delHref + ']' ).parents( 'tr' )
                        .fadeOut( 'slow', function() {
                            $( this ).remove();
                        });
                        
                    } //end success
                });
            } //end Yes
        } //end buttons
    }); //end dialog   
});
// function readUsers() {
//     //display ajax loader animation
//     $( '#ajaxLoadAni' ).fadeIn( 'slow' );
    
	
// 	var tempId = "";
//     $.ajax({
//         url: readUrl,
//         dataType: 'json',
//         success: function( response ) {
//             /*var j=1;
// 			//alert(response.length);
//             for( var i in response ) {
//                 response[ i ].nomor = j;
				
// 				//generate custom sell in_id
// 				tempId = response[ i ].sellout_id;			
// 				if (tempId.length < 8)
// 				{
// 					var ii = tempId.length;
// 					for(ii; ii<8; ii++)
// 					{
// 						tempId = '0' + tempId;
// 					}
// 				}
// 				response[ i ].custom_sellout_id = tempId;*/
//             //20121707 ayu
//             var j=1;
//             for( var i in response ) {
//                 response[ i ].nomor = j;
                
//                 var tempId;
//                 $.ajax({
//                               url: "<?=base_url();?>index.php/sell_out/defoger",
//                               type: "POST",
//                               data: {'str' : response[ i ].sellout_id},
//                               dataType: 'json',
//                               async: false,
//                               success: function(response2) {
//                                 tempId = response2;
//                               }
//                        });
            
//                 if (tempId.toString().length < 8)
//                 {
//                     var ii = tempId.toString().length;
//                     for(ii; ii<8; ii++)
//                     {
//                         tempId = '0' + tempId;
//                     }
//                 }
//                 response[ i ].custom_sellout_id = tempId;
// 				response[ i ].custom_created_on = response[ i ].created_on;
// 				//mod by anggwa@gmail.com 20120504
// 				//response[ i ].custom_created_on = response[ i ].created_on.substring(0, 10);	
				
// 				//response[ i ].custom_created_on = parseDate(response[ i ].created_on, 'mm.dd.yyyy');
				
				
//                 j++;
//             }
			
//             //clear old rows
//             $( '#records > tbody' ).html( '' );
			
//             //append new rows
//             $( '#readTemplate' ).render( response ).appendTo( "#records > tbody" );
			
//             //apply dataTable to #records table and save its object in dataTable variable
//             if( typeof dataTable == 'undefined' )
//                 dataTable = $( '#records' ).dataTable({"bJQueryUI": true});
            
//             //hide ajax loader animation here...
//             $( '#ajaxLoadAni' ).fadeOut( 'slow' );
			
//         }
//     });
// } // end readUsers

function readUsers() {
    $('.registeredRecord').dataTable({
                "bJQueryUI": true, // aktifkan tampilan tabel JQueryUI
                "sAjaxSource": readUrl, //data source
                "sAjaxDataProp": "aaData", //variabel yg menampung data table
                "bServerSide": true, //serverside processing true
                "bProcessing": true, // tampilkan 'processing...' status saat data dipanggil
                //"sPaginationType": 'fullNumbers',
                "bPaginate": true,
                "aoColumns":[ //tentukan kolom pd tabel yg akan menampung value dari server
                    {"mDataProp": "created_on", "sTitle": "Date"}, 
                    {"mDataProp": "sellout_id", "sTitle": "Sell Out No"}, 
                    {"mDataProp": "user_name", "sTitle": "Sales Name"}
                    
                ],
                "fnRowCallback": function(nRow, aaData, iDisplayIndex, iDisplayIndexFull) 
                {
                    // $(nRow).find('td').eq(-1).after('<a href="'+approveUrlNew+'/'+aaData[0]+'">Approve</a> |  <a href="'+updateUrlNew+'/'+aaData[0]+'">Edit</a> | <a href="'+delUrlNew+'/'+aaData[0]+'">Delete</a>'); //buat link action 
                    $(nRow).find('td').eq(0).before('<td>'+(parseInt(iDisplayIndex,10)+1+parseInt(dis))+'</td>'); //20120719 ayu
                    $(nRow).find('td').eq(-1).after('<a href="index.php/sell_out/getDetail/'+aaData[1]+'">View Detail</a>'); //buat link action 


                    $.ajax({
                        url: "<?=base_url();?>index.php/sell/defoger",
                        type: "POST",
                        data: {'str' : aaData[1]},
                        success: function(response) {
                            /*$(nRow).find('td').eq(0).replaceWith(response);*/
                            $(nRow).find('td').eq(2).replaceWith(response); //20120719 ayu
                        }
                    });

                    return nRow;
                }, //20120719 ayu
                
                "fnServerData": function ( sSource, aoData, fnCallback ) { 
                    $.getJSON( sSource, aoData, function (json) { 
                                
                    dis=json['iDisplayStart'];
                    fnCallback(json);
                });
                }  
    });
    $('.registeredRecord thead tr').find('th').eq(0).before('<th class="ui-state-default">No</th>'); //20120719 ayu
    $('.registeredRecord thead tr').find('th').eq(-1).after('<th class="ui-state-default" width="200px">Action</th>');
}

</script>